<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="form-group row">
              <label class="col-md-1 padding-right col-form-label col-offset-1"
                >日志跟踪码</label
              >
              <div class="col-md-7">
                <input type="text" class="form-control rounded" />
              </div>
              <div class="col-md-3">
                <b-button variant="primary">
                  <i class="ri-search-line align-middle mr-1"></i>查询
                </b-button>
              </div>
            </div>
            <div class="sel">
              <div class="source-type">
                <span class="sel-title">信源类型:</span>
                <button
                  type="button"
                  class="btn btn-light rounded-pill btn-sm source-type-item"
                  :class="{ isActive: sourceChange == index }"
                  v-for="(item,index) in sourceType"
                  :key="index"
                  @click="typeItem(index)"
                >
                  {{ item }}
                </button>
              </div>
              <div class="source-type">
                <span class="sel-title">排序方式:</span>
                <button
                  type="button"
                  class="btn btn-light rounded-pill btn-sm source-type-item"
                  :class="{ isActive: sortChange == index }"
                  v-for="(item,index) in sortData"
                  :key="index"
                  @click="sortItem(index)"
                >
                  {{ item }}
                </button>
              </div>
              <div class="source-type">
                <span class="sel-title">执行类型:</span>
                <button
                  type="button"
                  class="btn btn-light rounded-pill btn-sm source-type-item"
                  :class="{ isActive: implementChange == index }"
                  v-for="(item,index) in implementType"
                  :key="index"
                  @click="implementItem(index)"
                >
                  {{ item }}
                </button>
              </div>
            </div>
            <div class="journal_content">
              <div data-simplebar>
                <ul class="list-unstyled activity-wid">
                  <li class="activity-list" v-for="(item, index) in activityData" :key="index">
                    <div class="activity-icon avatar-xs">
                      <span class="avatar-title bg-soft-primary text-primary rounded-circle">
                        <i class="ri-user-2-fill"></i>
                      </span>
                    </div>
                    <div>
                      <p class="text-muted mb-0">
                        {{item.title}}
                        <span v-if="!item.openState" @click="openAndPutAway(index,true)">展开<i class="ri-arrow-right-s-line"></i></span>
                        <span v-else @click="openAndPutAway(index,false)">收起<i class="ri-arrow-left-s-line"></i></span>
                      </p>
                      <div class="journal_info">
                        <span>应用名称：抓取招标江苏政府网站（192.168.71.23）</span>
                        <span class="spendTime">花费时间：0.2ms</span>
                      </div>
                      <div :class="{'error_info':item.openState}" class="journal_error_content">
                        {{item.content}}
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
export default {
  components: {
    Layout,
    PageHeaderNew,
  },
  data () {
    return {
      items: [
        {
          text: "日志管理",
          url: "/log",
        },{
          text: "日志详情",
          url: "/",
        }
      ],
      sourceType: ["全部", "INFO", "ERROR", "WANR"],
      sourceChange: 0,
      sortData: ["默认", "执行时间", "执行顺序"],
      sortChange: 0,
      implementType: ["信源", "采集", "标记", "存储", "接口", "展示"],
      implementChange: 0,
      activityData: [
        {
          icon: "ri-bar-chart-fill",
          time: "刚刚",
          openState: false,
          content: `
            设置变量contenthtml出错，异常信息：{}
              org.spiderflow.core.expression.ExpressionError$TemplateException: Error (1): Couldn't call method 'json' with arguments '[<!DOCTYPE html>
                  at org.spiderflow.core.expression.ExpressionError.error(ExpressionError.java:53)
                      at org.spiderflow.core.expression.parsing.Ast$MethodCall.evaluate(Ast.java:1227)
                      at org.spiderflow.core.expression.parsing.Ast$MemberAccess.evaluate(Ast.java:915)
                      at org.spiderflow.core.expression.interpreter.AstInterpreter.interpretNodeList(AstInterpreter.java:46)
                      at org.spiderflow.core.expression.interpreter.AstInterpreter.interpret(AstInterpreter.java:31)
                      at org.spiderflow.core.expression.ExpressionTemplate.render(ExpressionTemplate.java:36)
                      at org.spiderflow.core.expression.DefaultExpressionEngine.execute(DefaultExpressionEngine.java:48)
          `,
          title: "2022-01-25 01:00:42.898 INFO o.spiderflow.core.executor.shape.VariableExecutor - 设置变量成功"
        },{
          icon: "ri-calendar-2-fill",
          time: "1分钟前",
          openState: false,
          content: `
            设置变量contenthtml出错，异常信息：{}
              org.spiderflow.core.expression.ExpressionError$TemplateException: Error (1): Couldn't call method 'json' with arguments '[<!DOCTYPE html>
                  at org.spiderflow.core.expression.ExpressionError.error(ExpressionError.java:53)
                      at org.spiderflow.core.expression.parsing.Ast$MethodCall.evaluate(Ast.java:1227)
                      at org.spiderflow.core.expression.parsing.Ast$MemberAccess.evaluate(Ast.java:915)
                      at org.spiderflow.core.expression.interpreter.AstInterpreter.interpretNodeList(AstInterpreter.java:46)
                      at org.spiderflow.core.expression.interpreter.AstInterpreter.interpret(AstInterpreter.java:31)
                      at org.spiderflow.core.expression.ExpressionTemplate.render(ExpressionTemplate.java:36)
                      at org.spiderflow.core.expression.DefaultExpressionEngine.execute(DefaultExpressionEngine.java:48)
          `,
          title: "2022-01-25 01:00:57.388 WANR rg.spiderflow.core.executor.shape.RequestExecutor - 执行变量超时"
        },{
          icon: "ri-edit-2-fill",
          time: "2分钟前",
          openState: false,
          content: `
            设置变量contenthtml出错，异常信息：{}
              org.spiderflow.core.expression.ExpressionError$TemplateException: Error (1): Couldn't call method 'json' with arguments '[<!DOCTYPE html>
                  at org.spiderflow.core.expression.ExpressionError.error(ExpressionError.java:53)
                      at org.spiderflow.core.expression.parsing.Ast$MethodCall.evaluate(Ast.java:1227)
                      at org.spiderflow.core.expression.parsing.Ast$MemberAccess.evaluate(Ast.java:915)
                      at org.spiderflow.core.expression.interpreter.AstInterpreter.interpretNodeList(AstInterpreter.java:46)
                      at org.spiderflow.core.expression.interpreter.AstInterpreter.interpret(AstInterpreter.java:31)
                      at org.spiderflow.core.expression.ExpressionTemplate.render(ExpressionTemplate.java:36)
                      at org.spiderflow.core.expression.DefaultExpressionEngine.execute(DefaultExpressionEngine.java:48)
          `,
          title: "2022-01-25 01:00:42.898 ERROR o.spiderflow.core.executor.shape.ParseExecutor - 解析变量contenthtml出错，异常信息"
        },{
          icon: "ri-user-2-fill",
          time: "3分钟前",
          openState: false,
          content: `
            设置变量contenthtml出错，异常信息：{}
              org.spiderflow.core.expression.ExpressionError$TemplateException: Error (1): Couldn't call method 'json' with arguments '[<!DOCTYPE html>
                  at org.spiderflow.core.expression.ExpressionError.error(ExpressionError.java:53)
                      at org.spiderflow.core.expression.parsing.Ast$MethodCall.evaluate(Ast.java:1227)
                      at org.spiderflow.core.expression.parsing.Ast$MemberAccess.evaluate(Ast.java:915)
                      at org.spiderflow.core.expression.interpreter.AstInterpreter.interpretNodeList(AstInterpreter.java:46)
                      at org.spiderflow.core.expression.interpreter.AstInterpreter.interpret(AstInterpreter.java:31)
                      at org.spiderflow.core.expression.ExpressionTemplate.render(ExpressionTemplate.java:36)
                      at org.spiderflow.core.expression.DefaultExpressionEngine.execute(DefaultExpressionEngine.java:48)
          `,
          title: "2022-01-25 01:00:42.898 ERROR o.spiderflow.core.executor.shape.ParseExecutor - 解析变量contenthtml出错，异常信息"
        }
      ]
    }
  },
  methods: {
    typeItem(i){
      this.sourceChange = i
    },
    sortItem(i){
      this.sortChange = i
    },
    implementItem(i){
      this.implementChange = i
    },
    openAndPutAway(i,state){
      this.activityData[i].openState = state
    },
  }
}
</script>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.source-type {
  margin-top: 20px;
  .sel-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .source-type-item {
    font-size: 12px;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.journal_content{
  margin-top: 30px;
}
.activity-list{
  p{
    span{
      margin-left: 20px;
      cursor: pointer;
      i{
        font-size: 15px;
        vertical-align: bottom;
      }
    }
  }
  .journal_info{
    .spendTime{
      margin-left: 50px;
      font-size: 1rem;
      font-weight: 600;
      color: #1cbb8c;
    }
  }
  .journal_error_content{
    display: none;
    margin-top: 20px;
  }
  .error_info{
    display: block;
  }
}
</style>
